<template>
  <div class="login-page flex-center">
    <a-form-model class="form" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
      <a-form-model-item>
        <a-input size="large" v-model="formInline.user" placeholder="Username">
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-input size="large" v-model="formInline.password" type="password" placeholder="Password">
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button
          block
          size="large"
          type="primary"
          html-type="submit"
          :disabled="formInline.user === '' || formInline.password === ''"
        >
          Log in
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { FormModel, Input } from 'ant-design-vue'
  Vue.use(FormModel).use(Input)
  export default {
    name: "login",
    data () {
      return {
        formInline: {
          user: 'admin',
          password: '123456'
        }
      }
    },
    methods: {
      handleSubmit (e) {
        this.$router.push('/home')
      }
    }
  }
</script>

<style scoped>
  .login-page {
    min-height: 100vh;
    background: url("../assets/images/bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .form {
    padding: 80px 50px;
    width: 500px;
    background: #ffffff;
    border-radius: 15px;
  }
</style>
